
class CreateBannerObj {
    constructor(label, arr) {
    // 定义 对象里的属性 存储形参 以后输入的实参
    this.labelObj = label;
    this.arrObj = arr;
    // 定义属性 存储 全局变量
    this.oUlLis;
    this.oOlLis;
    this.index = 1;
    this.liWidth;
    this.length = this.arrObj.length;
    this.oUl;
    this.oOl;
    this.time;
    this.bool = true;
    }
    init() {
    this.setPage();
    this.autoLoop();
    this.setMouse();
    this.setClick();
    this.hide();
    }
    // 动态生成标签函数
    setPage() {
    // 创建div div有两个a标签
    const oDiv = document.createElement('div');
    oDiv.innerHTML = `<a href="javaScript:;" name="left">&lt</a><a href="javaScript:;" name="right">&gt</a>`;
    // 创建ul ol 标签对象
    const oUl = document.createElement('ul');
    const oOl = document.createElement('ol');
    // 将创建的 ol ul 标签 存储到对象里
    this.oUl = oUl;
    this.oOl = oOl;
    
    // 定义两个ol ul 的空字符串 存储循环的动态生成内容 用于写入标签 
    let ulStr = '';
    let olStr = '';
    // 循环数组动态生成内容
    this.arrObj.forEach((item, key) => {
        ulStr += `<li><img src="${item.name}"></img></li>`;
        olStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` : `<li name="focus" num="${key}"></li>`;
    });
    // 将内容写入 标签
    oUl.innerHTML = ulStr;
    oOl.innerHTML = olStr;
    // 将创造的内容标签 写入 参数1 标签里
    this.labelObj.appendChild(oUl);
    this.labelObj.appendChild(oOl);
    this.labelObj.appendChild(oDiv);
    // 获取所有的 ul>li  ol>li
    this.oUlLis = oUl.querySelectorAll('li');
    this.oOlLis = oOl.querySelectorAll('li');
    // 获取li标签的宽度
    this.liWidth = this.oUlLis[0].offsetWidth;
    // 克隆第一个li 和最后一个li
    const cloneFirst = this.oUlLis[0].cloneNode(true);
    const cloneLast = this.oUlLis[this.length - 1].cloneNode(true);
    // 克隆的第一个li 写入 末位
    oUl.appendChild(cloneFirst);
    // 克隆的第一个写入 最前面
    oUl.insertBefore(cloneLast, this.oUlLis[0]);
    // 重新设定ul的宽度 让原始的第二个li 默认显示
    // 是 li标签个数 * li标签占位宽度 拼接px单位
    // li标签个数 是 原始数组个数+2
    oUl.style.width = (this.length + 2) * this.liWidth + 'px';
    
    oUl.style.left = - this.liWidth * 1 + 'px';
    }
    
    
    
    // 自动轮播图函数
    autoLoop() {
    this.time = setInterval(() => {
        this.index++;
        this.setFocusStyle();
        move(this.oUl, { left: - this.index * this.liWidth }, this.loopEnd.bind(this));
    }, 4000)
    
    
    }
    
    // 运动结束函数
    loopEnd() {
    console.log(111)
    if (this.index === this.length + 2 - 1) {
        this.index = 1;
        this.oUl.style.left = - this.index * this.liWidth + 'px';
    } else if (this.index === 0) {
        this.index = this.length + 2 - 1 - 1;
        this.oUl.style.left = - this.index * this.liWidth + 'px';
    }
    this.bool = true;
    }
    
    
    // 焦点样式函数
    setFocusStyle() {
    // ul>li 索引下标 -1 是 对应的  ol>li 索引下标 
    // 也就是 index-1 是 ol>li 索引下标
    // 循环给所有的 ol>li 清除 class.active
    this.oOlLis.forEach((item, key) => {
        item.classList.remove('active');
    })
    
    if (this.index === this.length + 2 - 1) {
        this.oOlLis[0].classList.add('active');
    } else if (this.index === 0) {
        this.oOlLis[this.oOlLis.length - 1].classList.add('active');
    } else {
        this.oOlLis[this.index - 1].classList.add('active');
    }
    }
    
    // 鼠标移出移入事件
    setMouse() {
    this.labelObj.addEventListener('mouseenter', () => {
        clearInterval(this.time);
    })
    this.labelObj.addEventListener('mouseleave', () => {
        this.autoLoop();
    })
    }
    
    // 鼠标点击 切换页面 函数
    setClick() {
    this.labelObj.addEventListener('click', (e) => {
        if (e.target.getAttribute("name") === "left") {
        
            if (this.bool === true) {
                this.bool = false;
            } else {
                return;
            }
    
            this.index--;
    
            this.setFocusStyle();
    
            move(this.oUl, { left: - this.index * this.liWidth }, this.loopEnd.bind(this));
    
        } else if (e.target.getAttribute("name") === "right") {
            if (this.bool) {
                this.bool = false;
            } else {
                return;
            }
            this.index++;
            this.setFocusStyle();
            move(this.oUl, { left: - this.index * this.liWidth }, this.loopEnd.bind(this));
    
        } else if (e.target.getAttribute("name") === "focus") {
            if (this.bool) {
                this.bool = false;
            } else {
                return;
            }
            this.index = Number(e.target.getAttribute("num")) + 1;
            this.setFocusStyle()
            move(this.oUl, { left: - this.index * this.liWidth }, this.loopEnd.bind(this));
        }
    
    
    })
    }
    
    //    窗口缩小事件
    hide() {
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
            clearInterval(this.time);
        } else if (document.visibilityState === 'visible') {
            this.autoLoop();
        }
    })
    }
    
}
    







    
           // 退出登录点击事件
   $('.logout').click(function(){
    const cookieobj = myGetCookie();
    console.log(cookieobj);
    console.log(cookieobj.login);
    if(cookieobj.login === undefined){
        if(window.confirm('你还没有登录 点击确定 跳转登录页面')){
            window.location.href = '../Html/login.html';
        }
    }else{

        mySetCookie('login' , 1 , -1, '/');
        window.alert('你已退出登录');
    }
})

$('.car').click(function(){
const cookieobj = myGetCookie();
if(cookieobj.login === undefined){
    if(window.confirm('你还没有登录 点击确定 跳转登录页面')){
            window.location.href = '../Html/login.html';
        }
}else{
    window.location.href = '../Html/cart.html';
}
});






















const imgArr = [
    {id:1,name:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F761bddfabda64acdbb591cfb2368ddbdf21516bd.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639384785&t=0bf3e21e66cb2527a0a7d324e98316c5'},
    {id:2,name:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yanlutong.com%2Fuploadimg%2Fimage%2F20210318%2F20210318151039_11462.jpg&refer=http%3A%2F%2Fimg.yanlutong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639384785&t=fb4fe56ba83d15d26f6385915ce32391'},
    {id:3,name:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fd30bf0356c0a74aa9b8fd40fce4c944c0e217b3a.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639384785&t=eca8a3deed3c51f5428d3270d32ffbd0'},
    {id:4,name:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F8aadeb05132b166aa1e9097b5c583e79fb497296.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639384978&t=653563315bda518308f47f6175653a8d'},
    {id:5,name:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F6d4a0174a44e3c41521f19be5ebc36811b5a2a78.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639384904&t=753fe06f208016f24e573c76c67e0b09'},
];

const banner = document.querySelector('.banner');

// 用new 把函数 生成新的对象 来调用函数
const bannerObj = new CreateBannerObj(banner , imgArr);
console.log(bannerObj);
    bannerObj.init();
